<template>
  <div class="dashboard-head">
    <div
      class="dashboard-header"
      :style="Model == 'edit' ? 'background:#1F1F1F' : ''"
    >
      <div class="dashboard-header-nowDate">
        <div class="time" v-if="Model == 'dashboard'">
          <div class="nowDate">
            {{ nowDate }}
          </div>

          <div class="nowTime">
            {{ nowTime }}
          </div>
          <div class="nowWeek">
            {{ nowWeek }}
          </div>
        </div>
        <!-- <div class="btn" v-if="route.name == 'home' && showReConnect">
          <el-button @click="reconnect" size="small">鹰眼重连</el-button>
        </div> -->
        <div class="edite-btn" v-if="route.name == 'alert' && showEdit">
          <div class="edit" @click="changeModel" v-if="Model == 'dashboard'">
            <svg-icon icon="编辑点位"></svg-icon
            ><span class="iconText">点位编辑</span>
          </div>
          <div class="save" @click="saveEdit" v-if="Model == 'edit'">
            <el-button
              color="rgba(38, 190, 255, 1)"
              style="color: rgba(255, 255, 255, 1);"
              >保存</el-button
            >
          </div>
          <div class="save" @click="exitEdit" v-if="Model == 'edit'">
            <el-button
              color="#0A2F40"
              style="color:rgba(38, 190, 255, 1);border: 1px solid #26BEFF;"
              >取消</el-button
            >
          </div>
          <div class="zoom" @click="zoomEdit" v-if="Model == 'edit'">
            <el-button
              color="#0A2F40"
              style="color:#ccc;border: 1px solid #6666;"
              >{{ isZoom ? "展开" : "缩放" }}</el-button
            >
          </div>
        </div>
      </div>

      <div class="dashboard-header-center" v-if="Model == 'dashboard'">
        <div class="dashboard-header-title">
          <span
            style="display: flex; align-items: center;justify-content: space-between;"
          >
            <!-- <h1 class="logo" style="margin-right: 8px;">
              <img
                src="../../assets/image/石龙港logo.png"
                alt=""
                class="logoimage"
              />
            </h1> -->
            {{ title }}
          </span>
        </div>
        <div class="headerName">
          {{ headerName }}
        </div>
      </div>
      <div class="right" v-if="Model == 'dashboard'"></div>
    </div>
    <!-- 按钮组 -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, watch, computed, defineEmits } from "vue";
import catchTime from "../../utils/dateTime";
import { useCatchTimeStore } from "../../stores/catchTime";
import { UseModel } from "@/stores/model";
import { UseHeaderName } from "@/stores/headerName";
import { useRoute } from "vue-router";
import { UseTab } from "@/stores/tab";
import { UseLocation } from "@/stores/location";
import { useFullScreenCard } from "@/stores/slg/fullscreencard";
import { usehidenStore } from "@/stores/hidenEdit";
import { storeToRefs } from "pinia";
const { showEdit, showReConnect } = storeToRefs(usehidenStore());
const props = defineProps({
  isZoom: {
    type: Boolean,
    default: false,
  },
});
const { isZoom } = toRefs(props);
const emit = defineEmits(["saveEdit", "exitEdit", "zoomEdit", "hkreconnect"]);
const tab = UseTab();
const { time } = toRefs(useCatchTimeStore());
const { headerName } = toRefs(UseHeaderName());
const model = UseModel();
const nowTime = ref("");
const nowDate = ref("");
const nowWeek = ref("");
const route = useRoute();
const uf = useFullScreenCard();
const useLocation = UseLocation();

const title = ref(window.Global.projectName);
const changeModel = async () => {
  tab.SetTab(4);
  model.SetMdel("edit");
  uf.setCardShow(false);
  uf.setHKARShow(false);
  uf.setbroadcastShow(false);
};
const Model = computed(() => {
  return model.$state.model;
});
const saveEdit = () => {
  emit("saveEdit");
};

const exitEdit = () => {
  emit("exitEdit");
};
const zoomEdit = () => {
  emit("zoomEdit");
};

const reconnect = () => {
  emit("hkreconnect");
};

onMounted(() => {
  let { date, week } = catchTime.init();
  nowDate.value = date;
  nowWeek.value = week;
  catchTime.hearTime();
});
watch(
  () => time.value,
  (newVal) => {
    nowTime.value = newVal;
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style scoped lang="scss">
.headerName {
  font-size: clamp(1rem, 0.83vw, 2rem);
  // font-size: toRem(16);
  color: #e0f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.save {
  display: flex;
  justify-content: center;
}

.logo {
  width: clamp(6.938rem, 5.78vw, 13.875rem);
  height: clamp(1.563rem, 1.3vw, 3.125rem);
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoimage {
  width: clamp(6.938rem, 5.78vw, 13.875rem);
  height: clamp(1.563rem, 1.3vw, 3.125rem);
}

.dashboard-header {
  width: 100%;
  height: 6vh;

  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  z-index: 4001;
  background-image: url("../../assets/image/dashboard/东江仓标题.png");
  background: center no-repeat 100% 100%;
  background-size: 100% 100%;

  .dashboard-header-center {
    display: flex;
  }

  .dashboard-header-nowDate {
    flex: 1;
    display: flex;
    margin-left: 25px;
    color: #ffffff;

    .time {
      display: flex;
      align-items: center;

      & > div {
        margin-right: 10px;
      }
    }

    .edite-btn {
      display: flex;
      width: fit-content;
      margin-left: 48px;

      & > div {
        margin-right: 20px;
      }
    }

    .edit {
      display: flex;
      align-items: center;
      cursor: pointer;
      width: fit-content;
      box-sizing: border-box;
      border-radius: 1.5rem;

      .iconText {
        margin-left: clamp(0.25rem, 0.21vw, 0.5rem);
      }
    }
  }

  .right {
    display: flex;
    justify-content: right;
    flex: 1;

    .dashboard-header-admin {
      display: flex;
      width: 25vw;
      justify-content: right;

      .dashboard-admin-index {
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 120px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  .dashboard-header-title {
    margin-right: 5px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: 1px;
    font-weight: bold;
    color: #e0f6ff;
    font-size: clamp(1.5rem, 1.25vw, 3rem);
  }
}

.dashboard-head {
  width: 100%;
  height: 6vh;
  z-index: 9;

  .dashboard-btnGroup {
    width: max-content;
    height: 50px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);

    .btn-item {
      margin: 0px 5px;
      // border: 1px solid;
      display: inline-block;
    }
  }
}
</style>
